<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['index'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' },
      theme: 'default'
    }
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideArrayIndex () {
      return this.insideSlideArray.indexOf(this.insideSlideArray.filter((currentValue) => {
        return currentValue.i === this.index
      })[0])
    },
    getDetail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.insideArrayIndex].itemContent.detail
    },
    getSeries () {
      var data = JSON.parse(JSON.stringify(this.getDetail.sheetData.slice(1)))
      var data1 = []
      data.forEach(element => {
          data1[element[0]] = data1[element[0]] || []
          data1[element[0]].push(element)
      })
      data1.shift()
      console.log('data1', data1)
      var series = []
      for (var i in data1) {
        var group = data1[i]
        series.push({
          ...this.getDetail.simpleScatter,
          type: 'scatter',
          name: group[0][0],
          data: group.map(item => {
            return { name: item[0], value: [item[1], item[2]] }
          })
        })
      }
      return series
    },
    option () {
      return {
        animation: this.getDetail.animation,
        title: this.getDetail.title,
        legend: this.getDetail.legend,
        tooltip: {},
        label: this.getDetail.label,
        itemStyle: this.getDetail.itemStyle,
        emphasis: this.getDetail.emphasis,
        xAxis: this.getDetail.xAxis,
        yAxis: this.getDetail.yAxis,
        series: this.getSeries,
        color: this.getDetail.color[this.getDetail.color.option],
        grid: this.getDetail.grid,
        backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
<style>

</style>
